<template>
  <el-aside class="aside" :width="$store.state.isCollapsed ? '64px' : '200px'">
    <el-menu :default-active="$route.path" :collapse-transition="false" :collapse="$store.state.isCollapsed"
      @open="handleOpen" @close="handleClose" :router="true">
      <el-menu-item index="/index">
        <el-icon>
          <HomeFilled />
        </el-icon>
        <span>短网址管理</span>
      </el-menu-item>
      <el-menu-item index="/domain">
        <el-icon>
          <Share />
        </el-icon>
        <span>网域管理</span>
      </el-menu-item>
      <el-menu-item index="/user-list">
        <el-icon>
          <UserFilled />
        </el-icon>
        <span>用户管理</span>
      </el-menu-item>
      <el-menu-item index="/center">
        <el-icon>
          <UserFilled />
        </el-icon>
        <span>个人中心</span>
      </el-menu-item>
      <!-- <el-menu-item index="/notfound">
          <el-icon><CircleCloseFilled /></el-icon>
          <span>404</span>
        </el-menu-item> -->
    </el-menu>
  </el-aside>
</template>

<script lang="ts" setup>
import {
  CircleCloseFilled,
  Share,
  HomeFilled,
  UserFilled
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)

}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>
<style lang="scss" scoped>
.aside {
  height: calc(100vh - 60px);

  .el-menu {
    height: 100%;
    background-color: rgb(48, 65, 86);

    .el-menu-item {
      color: rgb(191, 203, 217);

      &:hover {
        background-color: #263445;
      }
    }

    .el-menu-item.is-active {
      color: var(--el-menu-active-color);
      //  background-color: #263445;
    }
  }
}
</style>